<template>
    <div class="spec-preview">
        <img :src="imgObj.imgUrl" />
        <div class="event" @mousemove="enlarge"></div>
        <div class="big">
            <img :src="imgObj.imgUrl" ref="big" />
        </div>
        <!--遮罩层-->
        <div class="mask" ref="mask"></div>
    </div>
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from 'vue'
import bus from '@/libs/bus'

const props = defineProps(['skuImageList'])

const currentIndex = ref(0)
const mask = ref<HTMLDivElement | null>(null)
const big = ref<HTMLDivElement | null>(null)
const imgObj = computed(() => props.skuImageList[currentIndex.value] || {})

onMounted(() => {
    //全局事件总线：获取兄弟组件传递过来的索引值
    bus.on('getIndex', (index: any) => {
        currentIndex.value = index
    })
})

//放大处理位置函数
const enlarge = (e: MouseEvent) => {
    let left = e.offsetX - mask.value!.offsetWidth / 2
    let top = e.offsetY - mask.value!.offsetHeight / 2
    //约束范围
    if (left <= 0) {
        left = 0
    } else if (left >= mask.value!.offsetWidth) {
        left = mask.value!.offsetWidth
    }
    if (top <= 0) {
        top = 0
    } else if (top >= mask.value!.offsetHeight) {
        top = mask.value!.offsetHeight
    }
    //修改元素的left|top属性值
    mask.value!.style.left = left + 'px'
    mask.value!.style.top = top + 'px'
    big.value!.style.left = -2 * left + 'px'
    big.value!.style.top = -2 * top + 'px'
}
</script>

<style scoped lang="less">
.spec-preview {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;

    img {
        width: 100%;
        height: 100%;
    }

    .event {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 998;
    }

    .mask {
        width: 50%;
        height: 50%;
        background-color: rgba(0, 255, 0, 0.3);
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }

    .big {
        width: 100%;
        height: 100%;
        position: absolute;
        top: -1px;
        left: 100%;
        border: 1px solid #aaa;
        overflow: hidden;
        z-index: 998;
        display: none;
        background: white;

        img {
            width: 200%;
            max-width: 200%;
            height: 200%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    .event:hover ~ .mask,
    .event:hover ~ .big {
        display: block;
    }
}
</style>
